<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <title>智能组卷系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/elementui/index.css">
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
    <style>
        .body {
            min-width: 1366px;
        }

        .app-main {
            height: calc(100% - 64px);
        }

        .app-main .divTmp {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="app" id="app">
    <div class="app-wrapper openSidebar clearfix">
        <div class="sidebar-container">
            <div class="logo">
                智能组卷系统
            </div>

            <el-scrollbar wrap-class="scrollbar-wrapper">
                <el-menu
                        :default-active="defAct"
                        :unique-opened="false"
                        :collapse-transition="false"
                        background-color="#343744"
                        text-color="#bfcbd9"
                        active-text-color="#f4f4f5"
                >
                    <div v-for="item in menuList" :key="item.id">
                        <el-menu-item :index="item.id" @click="menuHandle(item,false)">
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-scrollbar>
        </div>
        <div class="main-container">
            <div class="navbar">
                <div class="head-lable">
              <span v-if="goBackFlag" class="goBack" @click="goBack()">
                  <img src="imgs/icon/btn_back@2x.png" alt=""/> 返回</span>
                    <span>{{headTitle}}</span>
                </div>
                <div class="right-menu">
                    <div class="avatar-wrapper">欢迎用户 {{ userInfo.username }} ！</div>
                    <el-dropdown @command="handleCommand">
                        <img src="imgs/icon/btn_people@2x.png" class="outLogin" alt="个人"/>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="a" >个人信息</el-dropdown-item>
                            <el-dropdown-item command="b" >修改密码</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <img src="imgs/icon/btn_close@2x.png" class="outLogin" alt="退出" @click="logout"/>
                </div>
            </div>
            <div class="app-main" v-loading="loading">
                <div class="divTmp" v-show="loading"></div>
                <iframe
                        id="cIframe"
                        class="c_iframe"
                        name="cIframe"
                        :src="iframeUrl"
                        width="100%"
                        height="auto"
                        frameborder="0"
                        v-show="!loading"
                ></iframe>
            </div>
        </div>
        <!-- 修改信息 -->
        <div class="modify-information-form">
            <el-dialog title="修改信息" width=400px :visible.sync="informationFormVisible">
                <el-form ref="informationEditForm" :model="informationFormData" :rules="informationRules"
                         label-position="right"
                         label-width="100px">
                    <el-row>
                        <el-form-item label="姓名:" prop="name">
                            <el-input placeholder="请输入姓名" v-model="informationFormData.name"/>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="联系电话:" prop="telephone">
                            <el-input placeholder="请输入联系电话" v-model="informationFormData.telephone"/>
                        </el-form-item>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="informationFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="modifyInformation()">确定</el-button>
                </div>
            </el-dialog>
        </div>

        <!-- 修改密码 -->
        <div class="modify-password-form">
            <el-dialog title="修改密码" width=400px :visible.sync="passwordFormVisible">
                <el-form ref="passwordEditForm" :model="passwordFormData" label-position="right"
                         label-width="100px">
                    <el-row>
                        <el-form-item label="原密码:" prop="title">
                            <el-input type="password" placeholder="请输入密码" v-model="passwordFormData.nowPassword"
                                      show-password></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="新密码:">
                            <el-input type="password" placeholder="请输入密码" v-model="passwordFormData.newPassword"
                                      show-password></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="确认密码:">
                            <el-input type="password" placeholder="请输入密码" v-model="passwordFormData.keyPassword"
                                      show-password></el-input>
                        </el-form-item>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="passwordFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="modifyPassword()">确定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script src="plugins/elementui/index.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/md5.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                defAct: '1',
                menuActived: '1',
                userInfo: {},
                menuList: [
                    {
                        id: '1',
                        name: '自动组卷',
                        url: 'pages/paper.html',
                    },
                    {
                        id: '2',
                        name: '试题查看',
                        url: 'pages/questions.html',
                    },
                    {
                        id: '3',
                        name: '试卷模板',
                        url: 'pages/model.html',
                    },
                    {
                        id: '4',
                        name: '我的试卷',
                        url: 'pages/my.html',
                    },
                ],
                iframeUrl: 'pages/paper.html',
                headTitle: '自动组卷',
                goBackFlag: false,
                loading: true,
                timer: null,
                informationFormData: {
                    name:"",
                    telephone:"",
                },//个人信息表单数据
                passwordFormData: {
                    nowPassword: "",
                    newPassword: "",
                    keyPassword: "",
                },//修改密码表单数据
                passwordFormVisible: false,     //修改密码表单是否可见
                informationFormVisible: false,  //个人信息表单是否可见
                informationRules: {
                    name: [{max: 20, message: '输入字段过长', trigger: 'blur'}],
                    telephone: [{max: 20, message: '输入字段过长', trigger: 'blur'}],
                },
            }
        },
        computed: {},
        created() {
            const userInfo = window.localStorage.getItem('userInfo')
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            this.closeLoading()
        },
        beforeDestroy() {
            this.timer = null
            clearTimeout(this.timer)
        },
        mounted() {
            window.menuHandle = this.menuHandle
        },
        methods: {
            //用户登出
            logout() {
                this.$confirm("确定退出吗？", "提示", {
                    type: 'info'
                }).then(() => {
                    axios.post("/user/logout").then((res) => {
                        if (res.data.code === 10020) {
                            localStorage.removeItem('user');
                            window.location.href = '/pages/login.html';
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).finally(() => {
                    });
                }).catch(() => {
                    this.$message.info("已取消退出");
                });
            },
            goBack() {
                const menu = this.menuList.find(item => item.id === this.menuActived)
                this.menuHandle(menu, false)
            },
            menuHandle(item, goBackFlag) {
                this.loading = true
                this.menuActived = item.id
                this.iframeUrl = item.url
                this.headTitle = item.name
                this.goBackFlag = goBackFlag
                this.closeLoading()
            },
            closeLoading() {
                this.timer = null
                this.timer = setTimeout(() => {
                    this.loading = false
                }, 1000)
            },
            handleCommand(command){
                if (command==="a") this.handleModifyInformation();
                if (command==="b") this.handleModifyPassword();
            },
            //弹出编辑个人信息窗口
            handleModifyInformation() {
                axios.get("/user/" + this.userInfo.id).then((res) => {
                    if (res.data.code === 20040) {
                        this.informationFormData = res.data.data;
                        this.informationFormVisible = true;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            //编辑个人信息
            modifyInformation() {
                axios.put("/user", this.informationFormData).then((res) => {
                    if (res.data.code === 20030) {
                        this.informationFormVisible = false;
                        this.$message.success("修改成功");
                    } else if (res.data.code === 20031) {
                        this.$message.error("修改失败,请检查输入内容");
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).finally(() => {
                });
            },
            //打开修改密码表单
            handleModifyPassword() {
                this.passwordFormVisible = true;
            },
            modifyPassword() {
                if (this.passwordFormData.newPassword !== this.passwordFormData.keyPassword)
                {
                    this.$message.error("确认密码输入与新密码不同");
                }else{
                    if (this.passwordFormData.newPassword === "") {
                        this.$message.error("密码不可为空");
                    } else {
                        var user0 = this.userInfo;
                        user0.password = md5(this.passwordFormData.nowPassword);
                        axios.post("/user/check", user0).then((res) => {
                            if (res.data === true) {
                                var user1 = this.userInfo;
                                user1.password = md5(this.passwordFormData.newPassword);
                                axios.put("/user/password", user1).then((res) => {
                                    if (res.data.code === 10030) {
                                        this.userInfo.password = this.passwordFormData.newPassword
                                        this.passwordFormData.nowPassword = "";
                                        this.passwordFormData.newPassword = "";
                                        this.passwordFormData.keyPassword = "";
                                        this.passwordFormVisible = false;
                                        this.$message.success("修改成功");
                                    } else {
                                        this.$message.error("修改失败");
                                    }
                                }).finally(() => {
                                });
                            } else {
                                this.$message.error("密码错误");
                            }
                        })
                    }
                }
            },
        }
    })
</script>
</html>